<script>
import AnalysisVideo from "../../analysisVideo.vue";
import { getShowImage } from "../../../../../../utils";
import common from "../../common"

export default {
  name: "analysis",
	computed: {
		common() {
			return common
		}
	},
  methods: { getShowImage },
  components: { AnalysisVideo },
  inject: ["root", "parent"],
  props: {
    contentList: Array,
  },
  data() {
    return {
      questionList: [],
      isVip: false,
    };
  },
  created() {
    //初始化数据
    //提取段落里面的问题
    for (let item of this.contentList) {
      if (item.contentType === "TOPIC") {
        this.questionList.push(item);
      }
    }
    this.isVip = this.root.isVip;
  },
};
</script>

<template>
  <view class="component">
    <!--		问题列表-->
    <view class="question-list">
      <view
        class="question-item"
        v-for="item in questionList"
        :key="item.questionId"
      >
        <view style="font-weight: bold">
          <text>{{ item.serialNum }}</text>
          <text>.\t</text>
					<text v-if="common.handleOptionList(item.childQuestions) === 'noDo'" style="color: darkred">[未作答]</text>
        </view>
        <!--				问题选项列表-->
        <view class="option-list">
          <view
            class="option-item"
            v-for="option in item.childQuestions"
            :key="option.tag"
          >
            <view
              class="tag"
              :class="{
                correct: option.answer,
                incorrect: option.userAnswer && !option.answer,
              }"
              >{{ option.tag }}</view
            >
            <view class="text">
              <view class="content">{{ option.content }}</view>
              <view class="trans">{{ option.trans }}</view>
            </view>
          </view>
        </view>
        <!--				题目解析和视频讲解-->
        <template v-if="isVip">
          <view
            v-html="item.analysis"
            v-if="item.analysis"
            class="analysis"
          ></view>
          <analysis-video
            v-if="item.videoUrl"
            :video-file-url="getShowImage(item.videoUrl)"
          ></analysis-video>
        </template>
        <view v-else class="btn-container">
          <view class="btn" @click="() => root.checkIsVip()">查看解析</view>
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.component {
  .question-list {
    margin-top: 40rpx;
    .question-item {
      margin-top: 40rpx;
      font-size: calc(30rpx * var(--font-size-rate));
      line-height: 1.7;
      .user-answer {
        font-weight: bold;
      }
      .option-list {
        display: flex;
        flex-wrap: wrap;
        margin-top: 10rpx;
        .option-item {
          width: 50%;
          display: flex;
          margin-bottom: 10rpx;
          .tag {
            line-height: 1;
            font-weight: 500;
            margin-right: 10rpx;
            font-size: calc(34rpx * var(--font-size-rate));
            width: 50rpx;
            height: 50rpx;
            border-radius: 25rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            &.correct {
              background: #1b9b69;
              color: white;
            }
            &.incorrect {
              background: #C0392B;
              color: white;
            }
          }
          .text {
            line-height: 1.2;
            .trans {
              color: var(--text-color-light);
            }
          }
        }
      }
      .btn-container {
        display: flex;
        justify-content: flex-end;
        margin-top: 10rpx;
        .btn {
          padding: 0 30rpx;
          height: 60rpx;
          border-radius: 30rpx;
          background: var(--theme-color);
          display: flex;
          align-items: center;
					color: var(--text-color-white);
        }
      }
      .analysis {
        color: var(--text-color-theme);
      }
    }
  }
}
</style>
